<template>
	<div class="zs-table-page-container">
		<div class="zs-card-sm zs-space-bottom zs-layout-flex-row zs-layout-justify-between">
			<div>
				<el-select v-model="queryParams.type" class="zs-select-md zs-space-right-sm" placeholder="楼栋经理" @change="queryList" filterable>
					<el-option v-for="item in manageTypeList" :key="item.key" :label="item.label" :value="item.key" />
				</el-select>
				<el-select v-model="queryParams.projectCode" class="zs-select-md zs-space-right-sm" placeholder="项目名称" @change="queryList" clearable filterable>
					<el-option v-for="item in projecList" :key="item.projectCode" :label="item.name" :value="item.projectCode" />
				</el-select>
				<el-select v-model="queryParams.statusList" multiple collapse-tags collapse-tags-tooltip class="zs-select-md zs-space-right-sm" placeholder="对比结果" @change="queryList" clearable filterable>
					<el-option v-for="item in dictObj.PROPERTY_MANAGER_STATUS" :key="item.id" :label="item.dictLabel" :value="item.dictValue" />
				</el-select>
				<el-popover popper-class="zs-popper" placement="bottom-end" trigger="click">
					<template #reference>
						<el-button class="zs-btn-square-solid" :class="{ 'zs-btn-square-solid-active': queryParams.mobile }">
							<el-icon>
								<MoreFilled />
							</el-icon>
						</el-button>
					</template>
					<template #default>
						<el-input v-model="queryParams.mobile" class="zs-select-md zs-space-right-sm" placeholder="手机号" @blur="queryList" clearable />
					</template>
				</el-popover>
				<el-button class="zs-btn-plain" @click="queryList"> 查询 </el-button>
			</div>
			<div>
				<el-button class="zs-btn-md zs-btn-primary" @click="goPropertyPaege">物业数据</el-button>
				<el-button class="zs-btn-md zs-btn-primary" @click="openDrawer(false, 'add', {}, 'sync')">立即同步</el-button>
			</div>
		</div>

		<!-- teble -->
		<div class="zs-card zs-table-page-content">
			<el-table class="zs-table-page-main" :data="tableData.data" v-loading="tableData.loading" stripe>
				<el-table-column type="index" label="序号" width="60" align="center" :index="index => index + 1 + (tableData.currentPage - 1) * curPageSize" />
				<el-table-column prop="jeezId" label="极致项目标识" show-overflow-tooltip align="left" :formatter="defaultTableData" />
				<el-table-column v-if="queryParams.type == 2" prop="buildId" label="极致物业楼栋id" show-overflow-tooltip align="left" :formatter="defaultTableData" />
				<el-table-column v-if="queryParams.type == 2" prop="buildName" label="极致物业楼栋名称" show-overflow-tooltip align="left" :formatter="defaultTableData" />
				<el-table-column prop="staffCode" label="员工工号" show-overflow-tooltip align="left" :formatter="defaultTableData" />
				<el-table-column prop="settleStaffCode" label="结算系统员工工号" show-overflow-tooltip align="left" :formatter="defaultTableData" />
				<el-table-column prop="staffName" label="员工姓名" align="center" :formatter="defaultTableData" show-overflow-tooltip />
				<el-table-column prop="mobile" label="手机号码" align="center" :formatter="defaultTableData" show-overflow-tooltip />
				<el-table-column prop="projectCode" label="梧桐项目编码" align="center" :formatter="defaultTableData" show-overflow-tooltip />
				<el-table-column prop="projectName" label="梧桐项目名称" align="center" :formatter="defaultTableData" show-overflow-tooltip />
				<el-table-column prop="userNo" label="梧桐用户工号" align="center" :formatter="defaultTableData" show-overflow-tooltip />
				<el-table-column prop="statusName" label="对比结果" align="center" :formatter="defaultTableData" show-overflow-tooltip/>
				<el-table-column prop="" label="查看" width="90" align="center">
					<template #default="{ row }">
						<el-button class="zs-link" link size="small" @click="goInfo(row)">角色</el-button>
					</template>
				</el-table-column>
			</el-table>
			<div class="zs-space-top-sm zs-table-page-pagination">
				<el-pagination v-model:currentPage="tableData.currentPage" v-model:page-size="curPageSize" :page-sizes="curPageSizes" :small="true" :background="true" layout="total, sizes, prev, pager, next, jumper" :total="tableData.total" @size-change="pageChange('size', $event)" @current-change="pageChange('page', $event)" />
			</div>
		</div>

		<!-- 立即同步 -->
		<DrawerSync :isShow="drawer.sync.isShowDrawer" :isReadOnly="drawer.sync.isReadOnly" :handleType="drawer.sync.handleType" :currentRow="queryParams" @close="closeDrawer($event, 'sync')"> </DrawerSync>
	</div>
</template>

<script setup>
	import DrawerSync from './components/drawerSync.vue';
	import { getStaffListApi, getProjectListApi } from '@/api/residence.js';
	import { ref, reactive } from 'vue';
	import { useStore } from 'vuex';
	import { useRouter } from 'vue-router';
	import { defaultTableData } from '@/utils/publicUtils';

	const router = useRouter();
	const store = useStore();
	const curPageSizes = ref(store.state.uiPageSizes);
	const curPageSize = ref(store.state.uiPageSizeDefault);
	let dictObj = store.getters.getDictObj(['PROPERTY_MANAGER_STATUS']);
	const manageTypeList = ref([
		{ key: 1, label: '项目经理' },
		{ key: 2, label: '栋号经理' },
	]);

	// 抽屉相关
	let drawer = reactive({
		sync: {
			handleType: '',
			isReadOnly: false,
			isShowDrawer: false,
		},
	});

	const openDrawer = (flag, handleType, row, drawerType) => {
		drawer[drawerType].isReadOnly = flag;
		drawer[drawerType].isShowDrawer = true;
		drawer[drawerType].handleType = handleType;
	};

	const closeDrawer = (data, drawerType) => {
		drawer[drawerType].isShowDrawer = data.isShow;
		data.isRefresh && queryList('init');
	};

	// 列表 filed
	const tableData = reactive({
		currentPage: 1,
		total: 0,
		loading: false,
		data: [],
	});

	//查询条件
	const queryParams = reactive({ pageNumber: 1, pageSize: curPageSize.value, type: 2, projectCode: '' });

	// 列表数据源
	const queryList = async () => {
		tableData.loading = true;
		let res = await getStaffListApi(queryParams);
		if (res.data.code !== 200) return;
		tableData.data = res.data.data.list || [];
		tableData.total = res.data.data.total || 0;
		tableData.loading = false;
	};

	// 分页
	const pageChange = (type, size) => {
		if (type == 'size') {
			queryParams.pageSize = size;
		} else {
			queryParams.pageNumber = size;
		}
		queryList();
	};

	//项目列表
	const projecList = ref([]);
	const getProjectList = async () => {
		let res = await getProjectListApi();
		if (res.data.code !== 200) return;
		projecList.value = res.data.data;
		queryParams.projectCode = projecList.value.length > 0 ? res.data.data[0].projectCode : '';
		queryList();
	};

	//物业数据
	const goPropertyPaege = () => {
		router.push({
			path: '/page/routeController/index',
			query: {
				rid: 'page_property_project_property',
				rTitle: '物业数据',
			},
		});
	};

	//角色
	const goInfo = row => {
		router.push({
			path: '/page/routeController/index',
			query: {
				rid: 'page_user_role_read_list',
				rTitle: '对象配置-项目',
				type: 'look',
				validStatus: 1,
				code: row.projectCode,
				name: row.staffName,
			},
		});
	};

	getProjectList();
</script>
